import {PageContainer} from "@ant-design/pro-layout";
import {getStat} from "@/services/doa/irs";
import React, {useEffect, useState} from "react";
import {StatisticCard} from "@ant-design/pro-card";
import RcResizeObserver from 'rc-resize-observer';


const {Divider} = StatisticCard;

const StatAnalysis = () => {
  const [responsive, setResponsive] = useState(false);

  const [stat, setStat] = useState({})

  const [timer, setTimer] = useState(0)

  // useEffect(async () => {
  //   await getStat().then((response) => {
  //     if (response.success) {
  //       setStat(response.data)
  //     }
  //   })
  // }, [])

  const updateStat = () => {
    getStat().then((response) => {
      if (response.success) {
        setStat(response.data)
      }
    })
  }

  const initStat = () => {
    getStat().then((response) => {
      if (response.success) {
        setStat(response.data)
      }
    })
  }
  useEffect(() => {
    initStat()

    setTimer(setInterval(() => {
      updateStat()
    }, 400))

    return () => {
      timer && clearInterval(timer)
    }
  }, [])

  return (
    <PageContainer>

      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group title="标识系统数据统计" direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: '标识数目',
              // tip: 'irs的数目',
              value: stat.irsNum,
              // precision:'2',
              suffix: '个',
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'}/>
          <StatisticCard
            statistic={{
              title: '下属机构数目',
              value: stat.orgNum,
              suffix: '个',
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'}/>
          <StatisticCard
            statistic={{
              title: '注册表数目',
              value: stat.regNum,
              suffix: '个',
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'}/>
          <StatisticCard
            statistic={{
              title: '仓库数目',
              value: stat.repoNum,
              suffix: '个',
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'}/>
          <StatisticCard
            statistic={{
              title: '注册用户数目',
              value: stat.userNum,
              suffix: '个',
            }}
          />
        </StatisticCard.Group>
      </RcResizeObserver>

    </PageContainer>
  );
}

export default StatAnalysis;
